<template>
  <div class="info_edit_cont">
    <div class="info_list">
      <el-form ref="form" :rules="rules" v-bind="getFormProps()">
        <div class="tem_cont">
          <el-row v-for="(item, index) in informationdata.list" :key="index" v-if="item.value">
            <el-col :span="3" v-if="informationdata.value">
              <b>{{item.name}}</b>
            </el-col>
            <el-col :span="21" v-if="!item.isCode">
              <el-row v-for="(sitem, sindex) in item.list" :key="sindex" v-if="sitem.value">
                <el-col :span="2">
                  {{sitem.name}}
                </el-col>
                <el-col :span="22">
                  <div v-if="sitem.type == 'checkbox'" class="tem_eol">
                    <el-checkbox-group v-model="sitem.valueData">
                      <el-checkbox v-for="(titem, tindex) in sitem.listValue" :key="tindex" :label="titem">{{titem}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div v-if="sitem.type == 'number'" class="tem_eol">
                    <el-form-item label="" :prop="sitem.prop" label-width="0">
                      <el-input type="number" v-model="sitem.valueData" style="width:100px;" @change="setCheckData(sitem.prop, sitem.valueData)"></el-input> {{sitem.unit}} <span class="remark_text">{{sitem.remark}}</span>
                    </el-form-item>
                  </div>
                  <div v-if="sitem.type == 'radio'" class="tem_eol">
                    <el-radio-group v-model="sitem.valueData" style="line-height:36px;">
                      <el-radio v-for="(fitem, findex) in sitem.list" :key="findex" :label="fitem">{{fitem}}</el-radio>
                    </el-radio-group>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="21" v-else>
              <div v-if="item.type == 'textarea'">
                <el-input type="textarea" v-model="item.valueData" :maxlength="item.maxLength" :placeholder="item.placeholder" :rows="5" number-word></el-input>
              </div>
              <div v-if="item.type == 'checkbox'">
                <el-checkbox-group v-model="item.valueData">
                  <el-checkbox v-for="(stime, sindex) in item.listValue" :key="sindex" :label="stime">{{stime}}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div v-if="item.type == 'number'">
                <el-input type="number" v-model="form.heartRate" style="width:100px;" @change="setCheckData(item.prop, item.valueData)"></el-input> {{sitem.unit}} <span class="remark_text">{{sitem.remark}}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <div class="button-box">
      <el-button @click="goBackList">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :disabled="!submitState">确 定</el-button>
    </div>
  </div>
</template>
<script>
import {form} from 'utils/mixins' // 引入form mixin
import trainApi from 'api/train'
export default {
  mixins: [form],
  props: {
    informationdata: {
      type: Object,
      default: {}
    },
    isTeachingInformationState: {
      type: String,
      default: ''
    },
    editId: {
      type: String,
      default: ''
    }
  },
  watch: {
    informationdata: {
      handler: function (val) {
        let stateArr = []
        for (let item of val.list) {
          if ((['textarea', 'number', 'radio', 'setRadio'].includes(item.type) && item.valueData) || (['checkbox'].includes(item.type) && item.valueData && item.valueData.length > 0)) {
            stateArr.push(true)
          } else {
            stateArr.push(false)
          }
          if (!item.isCode) {
            for (let sitem of item.list) {
              if ((['textarea', 'number', 'radio', 'setRadio'].includes(sitem.type) && sitem.valueData) || (['checkbox'].includes(sitem.type) && sitem.valueData && sitem.valueData.length > 0)) {
                stateArr.push(true)
              } else {
                stateArr.push(false)
              }
            }
          }
        }
        if (stateArr.includes(true)) {
          this.submitState = true
        } else {
          this.submitState = false
        }
      },
      deep: true
    }
  },
  data () {
    var checkIntension = (rule, value, callback) => {
      if (!(/^([0-9]|[1-9]\d|100)$/.test(value))) {
        callback(new Error('请输入0-100的整数'))
      } else {
        callback()
      }
    }
    var checkHeartrate = (rule, value, callback) => {
      if (!(/^([0-9]|[1-9]\d|[1]\d\d|200)$/.test(value))) {
        callback(new Error('请输入0-200的整数'))
      } else {
        callback()
      }
    }
    return {
      loading: false, // 必需要返回loading
      submitState: false,
      form: {
        heartRate: '',
        intension: ''
      },
      rules: {
        intension: [
          { validator: checkIntension, trigger: 'blur' }
        ],
        heartRate: [
          { validator: checkHeartrate, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    setCheckData: function (type, value) {
      this.form[type] = value
    },
    handleSubmit: function () { // 提交后台数据
      let isSet = true
      if (this.form.heartRate) {
        this.$refs['form'].validateField('heartRate', (val) => {
          if (val) {
            isSet = false
          }
        })
      }
      if (this.form.intension) {
        this.$refs['form'].validateField('intension', (val) => {
          if (val) {
            isSet = false
          }
        })
      }
      if (isSet) {
        this.handlegetProcess()
      }
    },
    handlegetProcess: function () {
      let type = this.editId ? 'PUT' : 'POST'
      trainApi.editInformation({
        id: this.editId,
        scheduleId: this.$route.query.scheduleid,
        info: JSON.stringify(this.informationdata)
      }, type).then((res) => {
        this.$emit('cancelInformationEdit')
      })
    },
    goBackList: function () {
      this.$emit('cancelInformationEdit')
    }
  }
}
</script>
<style lang="scss">
.info_edit_cont{
  margin-bottom:80px;
  .equipment{
    .el-checkbox{
      margin-bottom:20px;
    }
  }
  .el-form-item{margin-bottom:0;}
}
</style>
